<template>
  <div id="report-page">
    <el-card>
      <div class="container">
        <div class="block">
          <span class="demonstration"> 日期范围 </span>
          <el-date-picker
            v-model="dateList"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >                            
          </el-date-picker>                                           
        </div>
        <div display:flex   >
          <span class="demonstration"> 车间产线 </span>
          <el-select v-model="production_line" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <el-button @click="GetForm"> 更新数据 </el-button>
        </div>
      </div>
    </el-card>
    <el-card>
      <!-- 上半部分 -->
      <div class="upper-section">
        <!-- 左侧饼图区域 -->
        <div class="left-chart-container">
          <div
            ref="lineChart2"
            :style="{ width: '100%', height: '300px' }"
          ></div>
        </div>

        <!-- 右侧折线图区域 -->
        <div class="right-chart-container">
          <div
            ref="lineChart"
            :style="{ width: '100%', height: '300px' }"
          ></div>
        </div>
      </div>
    </el-card>

    <!-- 下半部分表格区域 -->
    <el-card>
      <div class="lower-section">
        <!-- <el-table :data="monthsData" style="width: 100%" stripe >
          <el-table-column prop="month" label="月份"></el-table-column>
          <el-table-column prop="部门A" label="部门A"></el-table-column>
          <el-table-column prop="部门B" label="部门B"></el-table-column>
          <el-table-column prop="部门C" label="部门C"></el-table-column>
          <el-table-column prop="部门D" label="部门D"></el-table-column>
          <el-table-column prop="部门E" label="部门E"></el-table-column>
        </el-table> -->

        <el-table
          ref="formData"
          :data="formData"
          max-height="350"
          stripe=""
          id="myTable"
          v-loading="loading"
        >
          <el-table-column
            v-for="(item, index) in tableList"
            :key="index"
            :prop="item.prop"
            :label="item.label"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
import { ElTable, ElTableColumn } from "element-plus"; // 引入Element UI的Table组件

export default {
  components: { ElTable, ElTableColumn }, // 注册组件
  data() {
    return {
      dateList: [],
      production_line: "",
      options: [
        {
          value: "BK3.0车间",
          label: "BK3.0车间",
        },
        {
          value: "综合车间",
          label: "综合车间",
        },
        {
          value: "发泡胶产线",
          label: "发泡胶产线",
        },
        {
          value: "TB_FIPG生产线",
          label: "TB_FIPG生产线",
        },
        {
          value: "焊接车间",
          label: "焊接车间",
        },
        {
          value: "点胶车间",
          label: "点胶车间",
        },
      ],
      formData: [],
      tableList: [
        { label: "日期", prop: "mes_date", key: 1 },
        { label: "计划数量", prop: "plan_count", key: 1 },
        { label: "投料数量", prop: "fed_count", key: 3 },
        { label: "合格数量", prop: "qualified_count", key: 4 },
        { label: "不合格数量", prop: "unqualified_count", key: 5 },
        { label: "不合格率", prop: "scrap_ratio", key: 6 },
      ],

      lineOption2: null,
      lineOption: null,
      picture3Option: null,
    };
  },
  mounted() {
    this.GetForm();
    //this.initPieChart();
    this.initLineChart();
    this.initLineChart2();
    //this.initPicture3();
  },
  methods: {
    initLineChart() {
      const lineChart = echarts.init(this.$refs.lineChart);
      this.lineOption = {
        title: {
          text: "计划/投产表",
        },
        tooltip: {
          tigger: "axis",
        },
        legend: {
          data: ["计划数量", "投料数量"],
        },
        xAxis: {
          type: "category",
          data: this.formData.map((item) => item.mes_date),
        },
        yAxis: {
          type: "value",
          name: "数量",
        },
        series: [
          {
            name: "计划数量",
            type: "bar",
            data: this.formData.map((item) => item.plan_count),
            color: "#E86452",
          },
          {
            name: "投料数量",
            type: "line",
            data: this.formData.map((item) => item.fed_count),
            color: "#FF9845",
          },
        ],
      };
      lineChart.setOption(this.lineOption);
    },
    initLineChart2() {
      const lineChart = echarts.init(this.$refs.lineChart2);
      let rateList = [];
      if (this.formData.length != 0) {
        this.formData.forEach((data) => {
          rateList.push("1.0");
        });
      }
      this.lineOption = {
        title: {
          text: "不合格表",
        },
        tooltip: {
          tigger: "axis",
        },
        legend: {
          data: ["不合格数量", "不合格率", "目标不良率"],
        },
        xAxis: {
          type: "category",
          data: this.formData.map((item) => item.mes_date),
        },
        yAxis: [
          {
            type: "value",
            name: "数量",
          },
          {
            type: "value",
            name: "比例",
          },
        ],
        series: [
          {
            name: "不合格数量",
            type: "bar",
            data: this.formData.map((item) => item.unqualified_count),
            color: "#E86452",
          },
          {
            name: "不合格率",
            type: "line",
            yAxisIndex: 1,
            data: this.formData.map((item) => item.scrap_ratio),
            color: "#FF9845",
          },
          {
            name: "目标不良率",
            type: "line",
            yAxisIndex: 1,
            data: rateList,
          },
        ],
      };
      lineChart.setOption(this.lineOption);
    },
    GetForm() {
      let datenow = new Date();
      let datebegin = "";
      let dateend = "";
      let production_line = "";
      if (this.dateList.length == 0) {
        dateend = datenow.toLocaleString();
        datebegin = new Date(datenow.setDate(datenow.getDate() - 20));
        datebegin = datebegin.toLocaleString();
      } else {
        datebegin = this.dateList[0].toLocaleString();
        dateend = this.dateList[1].toLocaleString();
      }

      if (this.production_line == null || this.production_line == "") {
        production_line = "BK3.0车间";
      } else {
        production_line = this.production_line;
      }
      let url = `/api/zpsc_report/GetZPSCReport?datebegin=${datebegin}&dateend=${dateend}&production_line=${production_line}`;
      this.http.get(url, {}, true).then((result) => {
        this.formData = result;
        this.$nextTick(() => {
          this.initLineChart();
          this.initLineChart2();
        });
      });
    },
  },
};
</script>
  

  <style scoped>
.upper-section {
  display: flex;
  justify-content: space-between;
}
.container {
  display: flex;
  justify-content: space-between; /* 为了在不同屏幕尺寸下保持间距，可添加弹性空间布局 */
}
.left-chart-container,
.right-chart-container {
  width: 48%;
  margin-right: 2%;
}

.lower-section {
  margin-top: 20px;
}
</style>